<template>
  <div class="main">
    <p class="title">押金支付</p>

    <PayWrap :amount="amount"/>

    <div class="pay-types">
      <p class="subtitle">付款方式</p>

      <div class="pay-item">
        <div>
          <img :src="wxPay" alt srcset>
          <span>微信支付</span>
        </div>
        <div></div>
      </div>
    </div>
    <div class="footer">
      <ActionButton class="blue-btn" text="确认支付" @click="pay"/>
    </div>

    <ServiceArea v-if="showAddress"/>
  </div>
</template>

<script>
import api from "../../api";
import common from "../../api/common";
import ActionButton from "@/components/common/ActionButton";
import PayWrap from "@/components/deposit/PayWrap";
import wxPay from "../../assets/common/wx-pay.png";
import ServiceArea from "@/components/common/ServiceArea";

export default {
  title: "支付",
  components: {
    ActionButton,
    PayWrap,
    ServiceArea
  },
  data() {
    return {
      wxPay,
      amount: 0,
      showAddress: false
    };
  },
  methods: {
    pay() {
      var uid = this.$store.state.uid;
      var id = common.getParam("id");
      var num = common.getParam("num");

      api.order.placeOrder(uid, id, num, res => {
        res = JSON.parse(res);
        var timeStamp = res.timeStamp;
        var nonceStr = res.nonceStr;
        var packArr = res.package.split("=");
        var paySign = res.paySign;
        var total_fee = common.getParam("total");
        var wxpackage = packArr[1];
        var payType = 'ticket'
        //点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数
        var params = `?timeStamp=${timeStamp}&nonceStr=${nonceStr}&package=${wxpackage}&paySign=${paySign}&payType=${payType}`;

        //定义path 与小程序的支付页面的路径相对应
        var path = "/pages/wxpay/wxpay" + params;
        //通过JSSDK的api使小程序跳转到指定的小程序页面
        wx.miniProgram.navigateTo({ url: path });
      });
    }
  },
  mounted() {
    var amount = common.getParam("total");
    this.$store.commit("setPayAmount", amount);
    this.amount = amount;
  }
};
</script>

<style lang="less" scoped>
.main {
  padding: 4vw;
  .title {
    font-size: 6vw;
    margin-bottom: 20vw;
  }
  .pay-types {
    .subtitle {
      font-size: 4vw;
      margin-bottom: 4vw;
    }
    .pay-item {
      & > div:first-child {
        display: flex;
        align-items: center;
        font-size: 4vw;
        img {
          margin-right: 3vw;
          width: 7vw;
          height: 7vw;
        }
      }
    }
  }
  .footer {
    margin-top: 15vw;
  }
}
</style>